<style lang="less">
</style>
<template>
  <div class="search">
    <Row>
      <Col>
      <Card>
        <Row>
          <Form ref="searchForm"
                :model="searchForm"
                inline
                :label-width="70"
                class="search-form">
            <Form-item label="运营商">
              <Select v-model="searchForm.operatorId"
                      style="width:160px;"
                      :clearable="true"
                      :transfer="true">
                <Option :key="0"
                        :value="0">全部</Option>
                <Option v-for="item in operatorSelect"
                        :value="item.value"
                        :key="item.value">{{ item.label }}
                </Option>
              </Select>
            </Form-item>
            <Form-item label="运输企业">
              <Select v-model="searchForm.companyId"
                      style="width:160px;"
                      :clearable="true"
                      :transfer="true">
                <Option :key="0"
                        :value="0">全部</Option>
                <Option v-for="item in companySelect"
                        :value="item.value"
                        :key="item.value">{{ item.label }}
                </Option>
              </Select>
            </Form-item>
            <Form-item label="车牌号">
              <Input type="text"
                     v-model="searchForm.licnum"
                     clearable
                     placeholder="车牌号"
                     style="width: 160px" />
            </Form-item>
            <div class="float-r">
              <Button @click="handleSearch"
                      type="primary"
                      icon="ios-search">
                搜索
              </Button>
              <Button @click="handleReset">重置</Button>
            </div>
          </Form>
        </Row>
        <Row>
          <Alert show-icon>
            已选择
            <span class="select-count">{{selectCount}}</span> 项
            <a class="select-clear"
               @click="clearSelectAll">清空</a>
          </Alert>
        </Row>
        <Row>
          <Table :loading="loading"
                 size="small"
                 border
                 :columns="columns"
                 :data="data"
                 max-height="500"
                 @on-sort-change="changeSort"
                 @on-selection-change="showSelect"
                 ref="table"></Table>
        </Row>
        <Row type="flex"
             justify="end"
             class="page">
          <Page :current="searchForm.current"
                :total="total"
                :page-size="searchForm.size"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,20,50,100]"
                size="small"
                show-total
                show-elevator
                show-sizer></Page>
        </Row>
      </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import {
  deviceTypeSelect,
  plateColorSelect,
  carTypeSelect,
  carStateSelect,
  operationTypeSelect,
  businessScopeSelect,
  refuelTypeSelect,
  carcolorSelect
} from '@/libs/dict'

import {
  getOperatorSelect,
  getCompanySelect,
  getCarPageList,
  addCar,
  editCar,
  deleteCar,
  getDevType
} from '@/api/operate'
import circleLoading from '../../my-components/circle-loading.vue'

export default {
  name: 'car-manage',
  components: {
    circleLoading
  },
  data() {
    return {
      drop: false,
      dropDownContent: '展开',
      dropDownIcon: 'ios-arrow-down',
      plateColorSelect: plateColorSelect,
      carTypeSelect: carTypeSelect,
      carStateSelect: carStateSelect,
      operationTypeSelect: operationTypeSelect,
      companySelect: [],
      operatorSelect: [],
      loading: true,
      operationLoading: false,
      selectCount: 0,
      selectList: [],
      searchForm: {
        operatorId: 0,
        companyId: 0,
        licnum: '',
        simCard: '',
        carState: 0,
        operationType: 0,
        cartypeId: 0,
        current: 1,
        size: 20
      },
      submitLoading: false,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '运输企业名称',
          key: 'companyName',
          minWidth: 200
        },

        {
          title: '车牌号',
          key: 'licnum',
          width: 120
        },
        {
          title: '车牌颜色',
          key: 'plateColor',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              this.plateColorSelect.find(item => {
                return item.value == params.row.plateColor
              }).label
            )
          }
        },
        {
          title: '车辆类型',
          key: 'cartypeId',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              this.carTypeSelect.find(item => {
                return item.value == params.row.cartypeId
              }).label
            )
          }
        },
        {
          title: 'SIM卡号',
          key: 'simCard',
          width: 160
        },

        {
          title: '运营类型',
          key: 'operationType',
          width: 120,
          render: (h, params) => {
            return h(
              'span',
              this.operationTypeSelect.find(item => {
                return item.value == params.row.operationType
              }).label
            )
          }
        },
        {
          title: '运营商',
          key: 'operatorName',
          minWidth: 200
        },
        {
          title: '车辆运营状态',
          key: 'carState',
          width: 150,
          render: (h, params) => {
            return h(
              'span',
              this.carStateSelect.find(item => {
                return item.value == params.row.carState
              }).label
            )
          }
        }
      ],
      data: [],
      total: 0,
      deviceTypes: []
    }
  },
  methods: {
    init() {
      this.getCarList()
      this.loadDeviceTypes()
      this.getOperatorSelectList()
      this.getCompanySelectList()
    },
    changePage(v) {
      this.searchForm.current = v
      this.getCarList()
      this.clearSelectAll()
    },
    changePageSize(v) {
      this.searchForm.size = v
      this.getCarList()
    },
    getCarList() {
      // 多条件搜索
      this.loading = true
      getCarPageList(this.searchForm).then(res => {
        this.loading = false
        if (res.code == 0) {
          this.data = res.data.records
          this.total = res.data.total
        }
      })
    },
    getOperatorSelectList() {
      getOperatorSelect().then(res => {
        if (res.code == 0) {
          this.operatorSelect = res.data
        }
      })
    },
    getCompanySelectList() {
      getCompanySelect().then(res => {
        if (res.code == 0) {
          this.companySelect = res.data
        }
      })
    },
    /**
     * 网络请求获取设备类型列表
     */
    loadDeviceTypes() {
      console.log('开始获取车辆类型列表')
      this.loading = true
      getDevType().then(res => {
        this.loading = false
        console.log('获取车辆类型列表', res)
        if (res.code == 0) {
          this.deviceTypes = res.data
        }
      })
    },
    dropDown() {
      if (this.drop) {
        this.dropDownContent = '展开'
        this.dropDownIcon = 'ios-arrow-down'
      } else {
        this.dropDownContent = '收起'
        this.dropDownIcon = 'ios-arrow-up'
      }
      this.drop = !this.drop
    },
    handleSearch() {
      this.searchForm.current = 1
      this.searchForm.size = 20
      this.getCarList()
    },
    handleReset() {
      this.searchForm.beanName = ''
      this.searchForm.current = 1
      this.searchForm.size = 20
      // 重新加载数据
      this.getCarList()
    },
    showSelect(e) {
      this.selectList = e
      this.selectCount = e.length
      this.$emit('showSelect', e)
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false)
    }
  },
  mounted() {
    this.init()
  }
}
</script>
